<template>
	<view class="content">
		<view class="evaluateBody">
			<view class="evaluateTextarea">
				<u--textarea v-model="req.content" placeholder="请输入您的宝贵评价" count></u--textarea>
			</view>
			<view class="headers_title">
				<view class="view"></view>
				<text>上传图片</text>
			</view>
			<view class="upload">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="6" :uploadText="''" uploadIcon="camera" uploadIconColor="#575b66"></u-upload>
			</view>
			<view class="solid"></view>
			<view class="evaluateContent">
				<text>功能描述</text>
				<u-rate :count="count" v-model="req.score" size="25" gutter="5" 
					activeColor="#fb8000"></u-rate>
				<!-- <next-rate type="star" size="15" v-model="req.score" :allowHalf="true" :touchable="true" :activeColor="'#fb8000'" :count="5"/>	 -->
			</view>
			<view class="evaluateContent">
				<text>功能描述</text>
				<u-rate :count="count" v-model="req.score" size="25" gutter="5"
					activeColor="#fb8000"></u-rate>	
			</view>
			<view class="evaluateContent">
				<text>功能描述</text>
				<u-rate :count="count" v-model="req.score" size="25" gutter="5"
					activeColor="#fb8000"></u-rate>		
			</view>
		</view>
		<button class="confirm" @click="courseComment">发表评价</button>
		
		<u-popup :show="show" @close="show = false" @open="show = true" mode="center" round="20">
			<view class="NewpopupBody">
				<text class="title">发表评论成功</text>
				<view class="but_flex">
					<button class="leftButton">取消</button>
					<button class="rightButton">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				fileList1: [],
				checked: false,
				count: 5,
				req: {
					order_id: '', //订单ID
					score: '', //综合评分
					speciality_score: '', //专业评分
					image_score: '', //形象评分
					teach_score: '', //教学评分
					service_score: '', //服务评分
					content: '', //评价内容
					is_anonymous: '', //是否匿名 0否 1是
					images:''
				},
				info:{}
			}
		},
		onLoad() {
		
		},
		methods: {
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://api.newpower.cloud/upload/uploadCos', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'upload',
						header: {
							'token': uni.getStorageSync('Token')
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res)
							}, 1000)
						}
					});
				})
			},
			/** 
			@method 订单评价
			**/
			async courseComment() {
				try {
					if (this.req.content) {
						let arr = new Array();
						for (var i = 0, len = this.fileList1.length; i < len; i++) {
							arr.push(this.fileList1[i].url);
						}
						
						this.req = {
							...this.req,
							...{
								images: arr.join(',')
							}
						};
						
						const res = await courseComment(this.req);
						if (res.code == 200 || res.code == '200') {
							uni.showToast({
								title: '评价成功！',
								icon: 'none',
								duration: 2000
							});
							
							setTimeout(() => {
								uni.navigateBack({
								  success: function() {
									   let pages = getCurrentPages()
										let beforePage = pages[pages.length-1] //上个页面A页面实例
										let currPage = pages[pages.length-2] //当前页面B页面实例
										currPage.$vm.refresh() //调用A页面的refresh方法
								  }
								});
							}, 1000);
						}
					} else {
						uni.showToast({
							title: '请确保评价内容不为空！',
							icon: 'none',
							duration: 2000
						});
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			}
		}
	}
</script>

<style>
	page{
		overflow: hidden;
	}
</style>
<style scoped lang="less">
	.content {
		width: auto;
		margin: 0px auto;
		background-color:#fff;
		padding:20rpx;
		
		.NewpopupBody{
			width: 550rpx;
			height:auto;
			padding-top:50rpx;
			background-color: transparent;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				display: block;
				text-align: center;
			}
			
			.but_flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:80rpx;
				.leftButton{
					width:40%;
					height:74rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius:50rpx;
					background-color:#efefef;
				}
				.rightButton{
					width:40%;
					height:74rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius:50rpx;
					background-color:#267fff;
				}
			}
		}
		
		.headers_title {
			width: auto;
			margin: 0px auto;
			display: flex;
			align-items: center;
			margin-top: 60rpx;
		
			.view {
				width: 10rpx;
				height: 34rpx;
				background: #029CFE;
				border-radius: 6rpx;
			}
			
			.flex{
				display: flex;
				align-items: center;
			}
			
			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				margin-left: 10rpx;
			}
		}
		
		.upload {
			margin-top: 30rpx;
		
			/deep/ .u-upload__button {
				background-color: #f4f4f4 !important;
				border-radius:10rpx;
			}
		}
		
		.evaluateBody {
			width: auto;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 20rpx;

			.evaluateHeader {
				width: auto;
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				text {
					margin-left: 20rpx;
					font-size: 30rpx;
					font-weight: 500;
					letter-spacing: 2rpx;
				}
			}
			
			.solid{
				width:100%;
				height: 12rpx;
				background: #F5F5F5;
				margin-top:30rpx;
				margin-bottom:40rpx;
				transform: scale(1.3);
			}
			
			.evaluateContent {
				width: auto;
				margin-bottom: 30rpx;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: block;
					margin-bottom:20rpx;
				}
			}

			.evaluateTextarea {
				width: auto;

				/deep/ .u-textarea {
					height: 216rpx;
					background-color: #F4F4F4;
					border-radius: 10rpx;
					border: none;
				}

				/deep/ .u-textarea__count {
					background-color: #f3f5f8 !important;
				}
			}
		}

		.confirm {
			width: 90%;
			height: 80rpx;
			margin: 0px auto;
			background-color:#029CFE;
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			letter-spacing: 2rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 70rpx;
		}
	}
</style>